<template>
		<div id="light" v-bind:class="lights[lightRank].color">{{lights[lightRank].title}}</div>
</template>
<script type="text/javascript">
	import $ from 'jquery'
	export default{
		name:'Light',
		data(){
			return{
				lights:[
					{
						index: 1,
						color: "white",
						title: "W"
					},
					{
						index: 2,
						color: "green",
						title: "G"
					},
					{
						index: 3,
						color: "yellow",
						title: "Y"
					},
					{
						index: 4,
						color: "red",
						title: "R"
					}
				]
			}
		},
		computed:{
			lightRanks(){
				return this.$store.state.lightRanks;
			},
			lightRank(){
				return this.$store.state.lightRank;
			}
		},
		watch:{
			lightRanks:{
				handler(curVal,oldVal){
					var ranks=curVal.vitalLights+curVal.humanLights;
					var lightRank = '0';
					if(ranks.indexOf('4') >= 0){
						lightRank = 3;
					}else if(ranks.indexOf('3') >= 0){
						lightRank = 2;
					}else if(ranks.indexOf('2') >= 0){
						lightRank = 1;
					}else{
						lightRank = 0;
					}
					this.$store.commit({
							type: "setLightRank",
							lightRank:lightRank
					});
				},
				deep:true
			}
		}
	}
	$(document).ready(function(){
		setInterval(function(){ $("#light").fadeOut(300).fadeIn(300); },1000);
	});
</script>
<style type="text/css">
	.white{
		background-color: white;
	}
	.green{
		background-color: green;
	}
	.yellow{
		background-color: yellow;
	}
	.red{
		background-color: red;
	}
	#light{
		border: 1px solid #000000;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius:15px;
		text-align: center;
	}
</style>